/*  

    只要传入进度条前景，背景，圆点就可以随便用。
    仅支持横条的进度条
    可以自定义进度条样式
    兼容pc，photo端

*/
(function(window){
    function Progress ($progressBar,$progressIn,$progressSpot){
        return new Progress.prototype.init($progressBar,$progressIn,$progressSpot);
    }
    Progress.prototype = {
        constructor:Progress,
        //初始化函数
        init:function($progressBar,$progressIn,$progressSpot){
            this.$progressBar = $progressBar;
            this.$progressIn = $progressIn;
            this.$progressSpot = $progressSpot;
            this.progressBar = $progressBar.get(0);
            this.progressIn = $progressIn.get(0);
            this.progressSpot = $progressSpot.get(0);
        },
        //设置限制setProgress函数的使用变量，防止在拖动过程中，set函数起作用导致进度条跳动
        isMove:false,
        //设置进度条监听事件
        progressMove: function(callback){
            //等于null说明存在该事件
            if(document.ontouchstart === null){
                this.photoMove(this,callback);
            }else{
               this.pcMove(this,callback);
            }
            
        },
        //计算移动后的进度条长度，设置进度条
        moveSetProgress:function(e,callback){
            //获取前景左侧到屏幕左侧的距离，背景的宽度
            var offLeft = this.progressIn.offsetLeft;
            var offWidth = this.progressBar.offsetWidth;
            /*进度条移动距离就是——点击处距离屏幕左侧距离 - 进度条左侧距离屏幕左侧距离。*/
            if(e.changedTouches){
                //移动端
                var pin = e.changedTouches[0].pageX - offLeft;
            }else{
                //pc端
                var pin = e.pageX - offLeft;
            }
            //合法进度的长度
            if(pin>=0 && pin<= offWidth){
                //设置前景
                this.$progressIn.css({width:pin});
                //设置圆点
                this.$progressSpot.css({left:pin});
                //通过回调函数返回 进度 与 背景宽度的比值，将 比值 * 音乐总时长 就是 播放的位置
                callback && callback(pin/offWidth);
            }
        },
        //用户设置进度条方法
        setProgress:function(time){
            if( !this.isMove ){
            this.$progressIn.css({width:time});
            this.$progressSpot.css({left:time});
            }
        },
        //移动端移动事件注册
        photoMove:function($this,callback){
            //给背景添加按下事件
            $this.$progressBar.bind('touchstart',function(e){
                $this.isMove = true;
                $this.moveSetProgress(e);
                $this.$progressBar.bind('touchmove',function(e){
                    $this.moveSetProgress(e);
                    e.stopPropagation();
                });
                $this.$progressBar.bind('touchend',function(e){
                    $this.moveSetProgress(e,(propor)=>{
                        callback && callback(propor);
                    });
                    $this.isMove = false;
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
            //给前景添加拖动事件
            $this.$progressIn.bind('touchstart',function(e){
                $this.isMove = true;
                $this.moveSetProgress(e);
                $this.$progressIn.bind('touchmove',function(e){
                    $this.moveSetProgress(e);
                    e.stopPropagation();
                });
                $this.$progressIn.bind('touchend',function(e){
                    $this.moveSetProgress(e,(propor)=>{
                        callback && callback(propor);
                    });
                    $this.isMove = false;
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
            //给圆点添加拖动事件
            $this.$progressSpot.bind('touchstart',function(e){
                $this.isMove = true;
                $this.moveSetProgress(e);
                $this.$progressSpot.bind('touchmove',function(e){
                    $this.moveSetProgress(e);
                    e.stopPropagation();
                });
                $this.$progressSpot.bind('touchend',function(e){
                    $this.moveSetProgress(e,(propor)=>{
                        callback && callback(propor);
                    });
                    $this.isMove = false;
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
        },
        //pc端移动事件注册
        pcMove:function($this,callback){
            //给背景添加按下事件
            $this.$progressBar.mousedown(function(e){
                $this.isMove = true;
                $this.moveSetProgress(e);
                $(document).mousemove(function(e){
                    $this.moveSetProgress(e);
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
            //给前景添加拖动事件
            $this.$progressIn.mousedown(function(e){
                $this.isMove = true;
                $this.moveSetProgress(e);
                $(document).mousemove(function(e){
                    $this.moveSetProgress(e);
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
            //给圆点添加拖动事件
            $this.$progressSpot.mousedown(function(e){
                $this.isMove = true;
                $this.moveSetProgress(e);
                $(document).mousemove(function(e){
                    $this.moveSetProgress(e);
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
            $(document).mouseup(function(e){
                $(document).off("mousemove");
                if($this.isMove){
                    $this.isMove = false;
                    $this.moveSetProgress(e,(propor)=>{
                        callback && callback(propor);
                    });
                }
            });
        }
    }
    Progress.prototype.init.prototype = Progress.prototype;
    window.Progress = Progress;
})(window)













/*


(function(window){
    function Progress ($progressBar,$progressIn,$progressSpot){
        return new Progress.prototype.init($progressBar,$progressIn,$progressSpot);
    }
    Progress.prototype = {
        constructor:Progress,
        init:function($progressBar,$progressIn,$progressSpot){
            this.$progressBar = $progressBar;
            this.$progressIn = $progressIn;
            this.$progressSpot = $progressSpot;
            this.progressBar = $progressBar.get(0);
            this.progressIn = $progressIn.get(0);
            this.progressSpot = $progressSpot.get(0);
        },
        isMove:false,
        progressMove: function(callback){
            var $this = this;
            var offLeft = $this.progressIn.offsetLeft;
            var offWidth = $this.progressBar.offsetWidth;
            var pin;
            //给背景添加按下事件
            $this.$progressBar.bind('touchstart',function(e){
                $this.isMove = true;
                pin = e.changedTouches[0].pageX - offLeft;
                if(pin>=0 && pin<= offWidth){
                    $this.$progressIn.css({width:pin});
                    $this.$progressSpot.css({left:pin});
                }
                $this.$progressBar.bind('touchmove',function(e){
                    pin = e.changedTouches[0].pageX - offLeft;
                    if(pin>=0 && pin<= offWidth){
                        $this.$progressIn.css({width:pin});
                        $this.$progressSpot.css({left:pin});
                    }
                    e.stopPropagation();
                });
                $this.$progressBar.bind('touchend',function(e){
                    pin = e.changedTouches[0].pageX - offLeft;
                    if(pin>=0 && pin<= offWidth){
                        $this.$progressIn.css({width:pin});
                        $this.$progressSpot.css({left:pin});
                        callback(pin/offWidth);
                    }
                    $this.isMove = false;
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
            //给前景添加拖动事件
            $this.$progressIn.bind('touchstart',function(e){
                $this.isMove = true;
                pin = e.changedTouches[0].pageX - offLeft;
                if(pin>=0 && pin<= offWidth){
                    $this.$progressIn.css({width:pin});
                    $this.$progressSpot.css({left:pin});
                }
                $this.$progressIn.bind('touchmove',function(e){
                    pin = e.changedTouches[0].pageX - offLeft;
                    if(pin>=0 && pin<= offWidth){
                        $this.$progressIn.css({width:pin});
                        $this.$progressSpot.css({left:pin});
                    }
                    e.stopPropagation();
                });
                $this.$progressIn.bind('touchend',function(e){
                    pin = e.changedTouches[0].pageX - offLeft;
                    if(pin>=0 && pin<= offWidth){
                        $this.$progressIn.css({width:pin});
                        $this.$progressSpot.css({left:pin});
                        callback(pin/offWidth);
                    }
                    $this.isMove = false;
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
            //给圆点添加拖动事件
            $this.$progressSpot.bind('touchstart',function(e){
                $this.isMove = true;
                this.moveSetProgress(e);
                $this.$progressSpot.bind('touchmove',function(e){
                    pin = e.changedTouches[0].pageX - offLeft;
                    if(pin>=0 && pin<= offWidth){
                        $this.$progressIn.css({width:pin});
                        $this.$progressSpot.css({left:pin});
                    }
                    e.stopPropagation();
                });
                $this.$progressSpot.bind('touchend',function(e){
                    pin = e.changedTouches[0].pageX - offLeft;
                    if(pin>=0 && pin<= offWidth){
                        $this.$progressIn.css({width:pin});
                        $this.$progressSpot.css({left:pin});
                        callback(pin/offWidth);
                    }
                    $this.isMove = false;
                    e.stopPropagation();
                });
                e.stopPropagation();
            });
        },
        moveSetProgress:function(e,callback){
            var pin = e.changedTouches[0].pageX - offLeft;
            if(pin>=0 && pin<= offWidth){
                this.$progressIn.css({width:pin});
                this.$progressSpot.css({left:pin});
            }
        },
        setProgress:function(time){
            if( !this.isMove ){
            this.$progressIn.css({width:time});
            this.$progressSpot.css({left:time});
            }
        }
    }
    Progress.prototype.init.prototype = Progress.prototype;
    window.Progress = Progress;
})(window)


*/